<template>
    <view class="page container">
        <view class="bgc-fff" style="margin-top: 32rpx" v-if="activeTab === '1'">
            <u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm" labelWidth="200rpx"
                errorType="toast">
                <u-form-item label="门店名称：" prop="title" borderBottom>
                    <u-input readonly v-model="formData.title" border="none" inputAlign="right"
                        placeholder="请输入门店名称"></u-input>
                </u-form-item>
                <u-form-item label="门店联系人：" prop="contact_name" borderBottom>
                    <u-input readonly v-model="formData.contact_name" border="none" inputAlign="right"
                        placeholder="请输入联系人姓名" fontSize="28rpx"></u-input>
                </u-form-item>
                <u-form-item label="联系方式：" prop="contact_phone" borderBottom>
                    <u-input readonly v-model="formData.contact_phone" border="none" inputAlign="right"
                        placeholder="请输入手机号" fontSize="28rpx"></u-input>
                </u-form-item>
                <u-form-item label="门店位置：" prop="map_address" borderBottom>
                    <u-input readonly v-model="formData.map_address" border="none" inputAlign="right"
                        placeholder="请选择门店位置" fontSize="28rpx">
                        <template slot="suffix">
                            <image class="w-25 h-32" src="/static/svg/local.svg"></image>
                        </template>
                    </u-input>
                </u-form-item>
                <u-form-item prop="map_street" borderBottom>
                    <view class="pl-28">
                        <u-input readonly v-model="formData.map_street" border="none" placeholder="请输入详细地址如门牌号等"
                            fontSize="28rpx"></u-input>
                    </view>
                </u-form-item>
                <u-form-item label="所属社区：" prop="region_name" borderBottom>
                    <u-input readonly v-model="formData.region_name" border="none" inputAlign="right"
                        placeholder="请选择所属社区" fontSize="28rpx">
                        <template slot="suffix">
                            <u-icon name="arrow-right"></u-icon>
                        </template>
                    </u-input>
                </u-form-item>
                <u-form-item label="营业执照：" prop="license" labelPosition="top">
                    <view class="pl-28 mt-16 flex-row-between">
                        <image class="w-284 h-204 br-12" :src="formData.license || '/pages2/static/upload-img.png'">
                        </image>
                        <!-- 详情时展示，审核状态 -->
                        <view style="margin-top: -55rpx" v-if="userInfo.yan_shop.id">
                            <image class="w-140 h-140" :src="getStatusImg"></image>
                        </view>
                    </view>
                </u-form-item>
                <u-form-item label="法人身份证（正反面）：" prop="front_image" labelPosition="top" labelWidth="400rpx">
                    <view class="pl-28 mt-16 flex-column-center">
                        <!-- 正面 -->
                        <block>
                            <image class="w-284 h-204 br-12"
                                :src="formData.front_image || '/pages2/static/upload-card1.png'"></image>
                        </block>
                        <!-- 间距 -->
                        <view class="w-28"></view>
                        <!-- 反面 -->
                        <block>
                            <image class="w-284 h-204 br-12"
                                :src="formData.back_image || '/pages2/static/upload-card2.png'"></image>
                        </block>
                    </view>
                </u-form-item>
                <u-form-item label="门头照片：(至多一张)" prop="logo" labelPosition="top" labelWidth="400rpx">
                    <view class="pl-28 mt-16">
                        <image class="w-284 h-204 br-12" :src="formData.logo || '/pages2/static/upload-img.png'">
                        </image>
                    </view>
                </u-form-item>
                <u-form-item label="门店形象展示：(5张以内)" labelPosition="top" labelWidth="400rpx" borderBottom>
                    <view class="pl-28 mt-16">
                        <u-upload disabled :file-list="formData.images" :maxCount="5" multiple width="284rpx"
                            height="204rpx" :previewFullImage="true">
                            <image class="w-284 h-204 br-12" src="/pages2/static/upload-img.png"></image>
                        </u-upload>
                    </view>
                </u-form-item>
                <u-form-item label="店铺简介：" prop="content" labelPosition="top">
                    <view class="pl-28 mt-16">
                        <view class="bgc-f7f8fa">
                            <u-textarea v-model="formData.content" border="none" height="268rpx"
                                placeholder="请输入店铺简介"></u-textarea>
                        </view>
                    </view>
                </u-form-item>
            </u--form>
        </view>
        <view v-if="activeTab === '2'">
            <view class="bgc-fff pad-28 ml-28 mr-28 br-12" style="margin-top: 32rpx"
                v-for="item in communityShopManageList" :key="item.id">
                <view class="flex-column-center fs-28 mb-20">
                    <text class="c-677585">姓　　名：</text>
                    <text>{{ item.truename }}</text>
                </view>
                <view class="flex-column-center fs-28 mb-20">
                    <text class="c-677585">联系方式：</text>
                    <text>{{ item.phone }}</text>
                </view>
                <view class="flex" style="justify-content: flex-end">
                    <view class="w-124 h-56 fs-28 c-c5261d br-12 flex-center-center btn-active"
                        style="border: 1px solid #c5261d" @click="$utils.onCall(item.phone)">
                        联系TA
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import {
    xhManageYanShopDetailApi
} from "@/services/my";
export default {
    data() {
        return {
            activeTab: "1",
            isEdit: false,
            formData: {

            },
            communityShopManageList: [],
        };
    },
    onLoad(options) {
        this.id = options.id;
        this.getApplyEnterYanShopDetail();
    },
    computed: {
        ...mapState({
            userInfo: (state) => state.user.userInfo,
        }),
        getStatusImg() {
            switch (+this.userInfo?.yan_shop?.status) {
                case 0:
                    return "/pages2/static/shenhezhong.png";
                case 1:
                    return "/pages2/static/shenhetongguo.png";
                case 2:
                    return "/pages2/static/shenhejujue.png";
                default:
                    return "";
            }
        },
    },
    methods: {
        ...mapActions({
            getUserInfo: "user/getUserInfo",
        }),
        //请求协会管理员列表
        getCommunityShopManageList() {
            communityShopManageListApi({
                shop_id: this.userInfo.yan_shop.id,
            }).then((res) => {
                this.communityShopManageList = res.data?.data || [];
            });
        },
        showReject() {
            uni.showModal({
                title: "驳回原因",
                content: this.formData.audit_remark || '暂无驳回原因',
                showCancel: false,
                confirmColor: '#C5261D',
            });
        },
        resetForm() {
            this.formData = this.$options.data().formData;
        },
        getApplyEnterYanShopDetail() {
            xhManageYanShopDetailApi({
                shop_id: this.id,
            }).then((res) => {
                if (res && res.data) {
                    const data = res.data?.shop_info;
                    // 处理图片数组
                    let images = [];
                    if (data.images) {
                        const imageUrls = data.images.split(",");
                        images = imageUrls.map((url) => ({
                            fullurl: url,
                            urls: url,
                        }));
                    }

                    this.formData = {
                        ...data,
                        images,
                    };
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.page {
    padding-bottom: 188rpx;
    background-color: #f7f8fa;

    /deep/.u-form-item__body {
        padding-top: 28rpx;
        padding-bottom: 28rpx;
    }

    /deep/.u-form-item__body__left {
        padding-left: 28rpx;
    }

    /deep/.u-form-item__body__left__content__label {
        font-size: 28rpx !important;
    }

    /deep/.u-form-item__body__right {
        padding-right: 28rpx;
    }

    /deep/.u-textarea {
        background-color: transparent;
    }

    .bottom-box {
        padding-top: 16rpx;
        box-sizing: border-box;
        position: fixed;
        z-index: 999;
        bottom: 0;
        left: 0;
        right: 0;
        height: 168rpx;
        background-color: #fff;
        box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: space-between;
    }

    .tabs {
        width: 686rpx;
        height: 68rpx;
        border-radius: 12rpx;
        background: #f7f8fa;
        display: flex;
        justify-content: space-between;

        .tab {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            font-weight: 500;

            &-active {
                border-radius: 12rpx;
                background: $theme-color;
                color: #fff;
            }
        }
    }
}
</style>